<template>
	<!-- 用于个人资料 -->
	<view class="main">
		<!-- cell栏 -->
		<view class="center">
			<uni-list>
				<uni-list-item showArrow link class="list_item">
					<template v-slot:body>
						<text class="slot-box slot-text">{{userInfo.nickName}}</text>
					</template>
					<template v-slot:footer>
						<!--						<uni-file-picker>-->
						<!--							<button class="slot-button" @click="changeAvatar">Change Avatar</button>-->
						
							<image class="slot-image" style="height: 100rpx;border-radius: 10%;" @click="changeAvatar" :src="userInfo.avatar"
								mode="widthFix"></image>
										
						<!--						</uni-file-picker>-->

						<!--						<image class="slot-image" src="/static/logo.png" mode="widthFix"></image>-->
					</template>
				</uni-list-item>
				<uni-list-item showArrow title="性别" class="list_item" link @click="showGenderPopup"
					:rightText="nm" />

				<uni-list-item showArrow title="电话" class="list_item" link :right-text="userInfo.username" />
				<!-- <uni-list-item showArrow title="邮箱" class="list_item" link :right-text="userInfo.username" /> -->
				<uni-list-item showArrow title="个人简介" class="list_item" link @click="showPopu" />
			</uni-list>
		</view>

		<view
			style="width: 100%;height: 50%;display: flex;justify-content: end;align-items: center;flex-direction: column;">
			<button style="width: 40%;height: 90rpx;margin-bottom: 10%;color: red;" @click="logout">退出登录</button>
		</view>


		<uni-popup ref="popup">
			<view class="content">{{userInfo.intro}}</view>
		</uni-popup>
		<dialog v-if="isGenderPopupVisible" @close="selectGender">
			<view>
				<text>请选择您的性别：</text>
				<button @click="selectGender(1)">男</button>
				<button @click="selectGender(2)">女</button>
			</view>
		</dialog>


	</view>


</template>

<script>
	import request from "@/common/request.js";

	export default {
		onLoad() {
			var userInfo = uni.getStorageSync('userInfo');
			this.userInfo = userInfo
			// console.log(this.userInfo)
			uni.request({
				url:`http://localhost:8081/userInfo/user/info/${userInfo.id}`,
				method:'POST',
				header:{
					"authority": uni.getStorageSync('userInfo').token
				},
				success:res => {
					console.log(res)
					this.userInfo.intro=res.data.intro
					this.userInfo.gender=res.data.gender
					console.log(this.userInfo.gender)
					console.log(this.userInfo.intro)
					this.nm=userInfo.gender === 1 ?'男':'女'
					console.log(this.userInfo.gender === 1 ?'男':'女')
				}
			})
		},
		data() {
			return {
				userInfo: {
				},
				nm:'',
				isGenderPopupVisible: false
			}
		},

		methods: {
			showGenderPopup() {
				uni.showActionSheet({
					itemList: ['女', '男'],
					success: (res) => {
						const gender = res.tapIndex === 1 ? '男' : '女';
						const userVo={
								avatar: this.userInfo.avatar,
								gender: res.tapIndex,
								id: this.userInfo.id,
								intro: this.userInfo.intro,
								username: this.userInfo.intro
						};
						// 处理用户选择的性别
						console.log('选择的性别：', res.tapIndex);
						this.userInfo.gender = res.tapIndex
						request(
							'/userInfo/user/info/update',userVo,
							'POST'
						).then((res=>{
							console.log(res);
						}))
					},
					fail: (err) => {
						console.error('显示性别选择对话框失败：', err);
					}
				});
			},
			selectGender(gender) {
				this.userInfo.gender = gender;
				this.isGenderPopupVisible = false;
			},
			// showGenderPopup() {
			// 	this.isGenderPopupVisible = true;
			// 	// this.$refs.popup2.open('center')
			// 	// this.isGenderPopupVisible = true;
			// },
			changeAvatar() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						const tempFilePaths = res.tempFilePaths
						uni.uploadFile({
							url: 'http://localhost:8081/upload/coursefile',
							filePath: tempFilePaths[0],
							name: 'filedata',
							success: (res) => {
								console.log(res);
								const newAvatarUrl = JSON.parse(res.data)
								// console.log(newAvatarUrl)

								this.userInfo.avatar = 'http://118.24.29.136:9000' + newAvatarUrl
									.url
								const userVo= {
										avatar: this.userInfo.avatar,
										gender: this.userInfo.gender,
										id: this.userInfo.id,
										intro: this.userInfo.intro,
										username: this.userInfo.intro
									}
								// console.log(this.userInfo.avatar)
								request(
									'/userInfo/user/info/update',userVo,
									'POST'
								).then(res=>{
									console.log(res);
								})
								var storageSync = uni.getStorageSync('userInfo');
								storageSync.avatar = this.userInfo.avatar
								uni.setStorage({
									key: 'userInfo',
									data: storageSync,
								})

							},
							fail: (uploadErr) => {
								console.error('Upload failed:', uploadErr)
							}
						})
					},
					fail: (error) => {
						console.error('Image selection failed:', error)
					}
				})
			},
			back() {
				uni.switchTab({
					url: "/pages/View/user/user"
				})
			},
			logout() {
				uni.request({
					url: 'http://localhost:8081/userAuth/logout',
					method: 'POST',
					success: (res) => {
						console.log(res);
						uni.clearStorageSync();
						uni.reLaunch({
							url: '/pages/View/login/login'
						})
					}
				})

			},
			showPopu() {
				this.$refs.popup.open('center')
			}
		},

	}
</script>

<style>
	.main {
		width: 100%;
		height: 100%;
	}

	.title {
		height: 70rpx;
		width: 100%;
		text-align: center;
		display: flex;
		flex-direction: row;
		font-size: x-large;
		font-family: cursive;
	}



	.center {
		width: 100%;
		background-color: white;
	}

	.img {
		border: 1rpx solid #d0d0d0;
		overflow: hidden;
		height: 70rpx;
		width: 70rpx;
		border-radius: 35rpx;
		position: fixed;
		right: 80rpx;
	}

	.list_item {
		height: 130rpx;
		font-weight: 800;
	}



	.slot-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}

	.slot-image {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		margin-right: 10px;
		width: 40px;
		height: 40px;
	}

	.slot-text {
		flex: 1;
		font-size: 14px;
		margin-right: 10px;
		font-weight: 800;
	}

	.content {
		width: 500rpx;
		height: 500rpx;
		background-color: #f0f0f0;
		box-shadow: 10px 5px 5px #636363;
		border-radius: 20rpx;
		display: flex;
		flex-wrap: wrap;
		padding: 50rpx;
		align-items: center;
		justify-content: center;
	}

	.slot-button {
		color: #007AFF;
		background-color: transparent;
		border: none;
		outline: none;
		font-size: 14px;
		margin-right: 10px;
	}
</style>
